<template>
  <div class="home">
    <div>
      <p>用户：{{ userInfo }}</p>
      <p>code：{{ code }}</p>
      <p>loginStatus:{{ loginStatus }}</p>
      <Button @click="resetLogin">重置</Button>
    </div>
  </div>
</template>

<script lang="ts">
  import { Button } from 'ant-design-vue';
  import { defineComponent, computed, ref } from 'vue';
  import { useStore } from 'vuex';
  import prayers from '../components/prayers';
  import setting from '/@/components/setting/index';

  export default defineComponent({
    name: 'Home',
    components: { Button, setting, prayers },
    setup() {
      const store = useStore();
      const loginStatus = computed(() => store.getters.loginStatus);
      const accessToken = computed(() => store.getters.accessToken);
      const userInfo = computed(() => store.getters.userInfo);
      const code = computed(() => store.getters.code);

      const isShowSetting = ref(false);

      function setShowSetting() {
        isShowSetting.value = true;
        setTimeout(() => {
          isShowSetting.value = false;
        }, 2000);
      }

      setShowSetting();

      /* function setLoginStatus (loginStatus: number) {
      store.dispatch('setLoginStatus', loginStatus)
    } */
      async function resetLogin() {
        store.dispatch('setLoginStatus', 0);
        store.dispatch('setScopeNumber', 0);
        store.dispatch('setAccessToken', '');
        location.reload();
        // const user = await getUser();
      }

      return {
        loginStatus,
        accessToken,
        userInfo,
        code,
        resetLogin,
        isShowSetting,
        setShowSetting,
        // setLoginStatus
      };
    },
  });
</script>
